<template>
  <el-dialog name="RegisterShade" title="注册" :visible.sync="dialogRegister" center width="500px">
    <div class="s-Registershade">
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="姓名:" prop="userName">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="NewPassword">
          <el-input type="password" v-model="form.NewPassword"></el-input>
        </el-form-item>
        <el-form-item label="再次确认密码:" prop="NewPasswordAgain">
          <el-input type="password" v-model="form.NewPasswordAgain"></el-input>
        </el-form-item>
        <el-form-item class="login-sub-content">
          <el-button type="primary" @click="RegisterSubmin('form')">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "RegisterShade",
  data() {
    // 密码
    const ToPassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else if (!/^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(.{8,20})$/.test(value)) {
        callback(new Error("密码设置8到20位,必须包含大写字母、小写字母、数字"));
      } else {
        callback();
      }
    };
    // 确认密码
    const equalToPassword = (rule, value, callback) => {
      if (this.form.NewPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      dialogRegister: false,
      form: {
        userName: "",
        NewPassword: "",
        NewPasswordAgain: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        NewPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { required: true, validator: ToPassword, trigger: "blur" },
        ],
        NewPasswordAgain: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    RegisterSubmin(form) {
      let _this = this;
      this.$refs[form].validate(valid => {
        if (valid) {
          _this.$http
            .post("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/Register", _this.form)
            .then(res => {
              let { code } = res;
              if (code == 0) {
                _this.$message({
                  message: "注册成功",
                  type: false,
                });
                _this.$refs[form].resetFields();
                _this.dialogRegister = false;
              }
            })
            .catch(err => {
              console.log(err.message || "数据异常");
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
